import React, { FC, useContext, useState } from 'react';
import { Popover, Input, Button, Progress } from 'antd';
import { BlockPicker, SketchPicker } from 'react-color';

import {
  FontSizeOutlined,
  CaretLeftOutlined,
  CaretRightOutlined,
  DragOutlined,
  BoldOutlined,
  ItalicOutlined,
  UnderlineOutlined,
  AlignRightOutlined,
  AlignCenterOutlined,
  AlignLeftOutlined,
  DeleteOutlined,
  ArrowLeftOutlined,
  ArrowDownOutlined,
  ArrowRightOutlined,
  ArrowUpOutlined,
  UpCircleOutlined,
  DownCircleOutlined,
  LeftCircleOutlined,
  RightCircleOutlined,
  UpSquareOutlined,
  DownSquareOutlined,
  LeftSquareOutlined,
  RightSquareOutlined,
  ZoomInOutlined,
  ZoomOutOutlined,
  RadiusUpleftOutlined,
  RadiusUprightOutlined,
  RadiusBottomleftOutlined,
  RadiusBottomrightOutlined,
  ColumnWidthOutlined,
  ColumnHeightOutlined,
  LineHeightOutlined,
  BgColorsOutlined,
  FontColorsOutlined,
  CopyOutlined,
  BorderLeftOutlined,
  BorderRightOutlined,
  BorderTopOutlined,
  BorderBottomOutlined,
  MenuOutlined,
  MinusOutlined,
  PlusOutlined,
} from '@ant-design/icons';
import { DesignRedux } from '../../DesignRedux';
import styles from './index.less';
import { getDashed } from '@/pages/Editor/components/Beautiful/components/utils';

const BoxFC: FC<any> = (props: any) => {
  const { centerText } = props;
  const { globalState, dispatch } = useContext(DesignRedux);
  const { currentNode, schema } = globalState; // 右侧元素属性

  const [percent, setPercent] = useState(0);

  // 删除节点
  function onClickDel(param: any) {}

  function onClickExec() {
    // document.execCommand('underline');
    // document.execCommand('italic');
    document.execCommand('ForeColor', false, '#BBDDCC');
  }

  const onClickMargeLeftIn = () => {
    let pNum = percent - 1;
    if (percent < 0) {
      pNum = 0;
    }
    setPercent(pNum);
  };

  const onClickMargeLeftOut = () => {
    let pNum = percent + 1;
    if (pNum > 100) {
      pNum = 100;
    }
    setPercent(pNum);
  };

  const onClickColor = () => {};

  const hoverContent = (
    <>
      <CaretLeftOutlined onClick={onClickMargeLeftIn} />
      <Progress
        type="circle"
        percent={percent}
        width={60}
        format={(percent) => `${percent} px`}
      />
      <CaretRightOutlined onClick={onClickMargeLeftOut} />
    </>
  );

  const colorContent = (
    <>
      <div className={styles.colorContent}>
        <div
          onClick={onClickColor}
          className={styles.colorItem}
          style={{ backgroundColor: '#F44336' }}
        />
        <div
          onClick={onClickColor}
          className={styles.colorItem}
          style={{ backgroundColor: '#d9e3f0' }}
        />
        <div
          onClick={onClickColor}
          className={styles.colorItem}
          style={{ backgroundColor: '#f47373' }}
        />
        <div
          onClick={onClickColor}
          className={styles.colorItem}
          style={{ backgroundColor: '#37D67A' }}
        />
        <div
          onClick={onClickColor}
          className={styles.colorItem}
          style={{ backgroundColor: '#2CCCE4' }}
        />
        <div
          onClick={onClickColor}
          className={styles.colorItem}
          style={{ backgroundColor: '#DCE775' }}
        />
        <div
          onClick={onClickColor}
          className={styles.colorItem}
          style={{ backgroundColor: '#BA68C8' }}
        />
        <div
          onClick={onClickColor}
          className={styles.colorItem}
          style={{ backgroundColor: '#0693E3' }}
        />
        <div
          onClick={onClickColor}
          className={styles.colorItem}
          style={{ backgroundColor: '#4CAF50' }}
        />
      </div>
      <Input
        className={styles.colorInput}
        defaultValue={'#4CAF50'}
        size={'small'}
      />
    </>
  );

  if (getDashed(currentNode, centerText) == 'qhParamDefault') {
    return <div>{props.children}</div>;
  }

  return (
    <div>
      <div className={styles.textBox} id={'textBoxId'}>
        <div className={styles.textCommend} onClick={onClickExec}>
          <div>
            <BoldOutlined />
            <ItalicOutlined />
            <UnderlineOutlined />
            <AlignLeftOutlined />
            <AlignCenterOutlined />
            <AlignRightOutlined />

            <Popover
              placement="top"
              title={'顶侧外边距'}
              content={hoverContent}
              trigger="hover"
              getPopupContainer={() => document.getElementById('textBoxId')}
            >
              <ArrowDownOutlined />
            </Popover>

            <Popover
              placement="top"
              title={'底侧外边距'}
              content={hoverContent}
              trigger="hover"
              getPopupContainer={() => document.getElementById('textBoxId')}
            >
              <ArrowUpOutlined />
            </Popover>

            <Popover
              placement="top"
              title={'左侧外边距'}
              content={hoverContent}
              trigger="hover"
              getPopupContainer={() => document.getElementById('textBoxId')}
            >
              <ArrowLeftOutlined />
            </Popover>

            <Popover
              placement="top"
              title={'右侧外边距'}
              content={hoverContent}
              trigger="hover"
              getPopupContainer={() => document.getElementById('textBoxId')}
            >
              <ArrowRightOutlined />
            </Popover>

            {/*padding*/}
            <Popover
              placement="top"
              title={'顶侧内边距'}
              content={hoverContent}
              trigger="hover"
              getPopupContainer={() => document.getElementById('textBoxId')}
            >
              <UpSquareOutlined />
            </Popover>

            <Popover
              placement="top"
              title={'底侧内边距'}
              content={hoverContent}
              trigger="hover"
              getPopupContainer={() => document.getElementById('textBoxId')}
            >
              <DownSquareOutlined />
            </Popover>
            <Popover
              placement="top"
              title={'左侧内边距'}
              content={hoverContent}
              trigger="hover"
              getPopupContainer={() => document.getElementById('textBoxId')}
            >
              <LeftSquareOutlined />
            </Popover>
            <Popover
              placement="top"
              title={'右侧内边距'}
              content={hoverContent}
              trigger="hover"
              width={80}
              getPopupContainer={() => document.getElementById('textBoxId')}
            >
              <RightSquareOutlined />
            </Popover>
          </div>

          <div>
            <Popover
              placement="top"
              title={'字体大小'}
              content={hoverContent}
              trigger="hover"
              getPopupContainer={() => document.getElementById('textBoxId')}
            >
              <FontSizeOutlined />
            </Popover>

            <Popover
              placement="top"
              title={'字体行高'}
              content={hoverContent}
              trigger="hover"
              getPopupContainer={() => document.getElementById('textBoxId')}
            >
              <LineHeightOutlined />
            </Popover>

            <Popover
              placement="top"
              title={'字体色'}
              content={colorContent}
              trigger="hover"
              getPopupContainer={() => document.getElementById('textBoxId')}
            >
              <FontColorsOutlined />
            </Popover>

            <Popover
              placement="top"
              title={'背景色'}
              content={colorContent}
              trigger="hover"
              getPopupContainer={() => document.getElementById('textBoxId')}
            >
              <BgColorsOutlined />
            </Popover>

            <RadiusUpleftOutlined />
            <RadiusUprightOutlined />
            <RadiusBottomleftOutlined />
            <RadiusBottomrightOutlined />

            <ColumnWidthOutlined />
            <ColumnHeightOutlined />

            <BorderLeftOutlined />
            <BorderRightOutlined />
            <BorderTopOutlined />
            <BorderBottomOutlined />
          </div>
        </div>
        {props.children}
        <div className={styles.textDelete}>
          <DeleteOutlined onClick={() => onClickDel()} />
          <CopyOutlined />
        </div>
      </div>
    </div>
  );
};

export default BoxFC;
